<script setup lang="ts">
  // import { onMounted } from "vue";
  // import { RouterView } from "vue-router";

  onMounted(() => {
    // 从开始至load总耗时
    const pnt = window.performance.getEntriesByType("navigation")[0];
    // 参考：
    // https://www.ai2news.com/blog/2817555/
    // https://developer.mozilla.org/zh-CN/docs/Web/API/PerformanceNavigationTiming
    const defaultDelay = (Math.random() * 2000 + 500) >> 0; // 控制等待时间在2500-3000ms之间
    const duration = pnt.duration; // 从开始至load总耗时
    const delay = import.meta.env.PROD && defaultDelay - duration > 0 ? defaultDelay - duration : 0;

    setTimeout(() => {
      document.body.classList.add("loaded");
    }, delay);
  });
</script>

<template>
  <router-view></router-view>
  <ul role="list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <span class="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
    Hello<br />
    World
  </span>
  <span class="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
    Hello<br />
    World
  </span>
  <div class="border-2 border-red-900 bg-yellow-50 rounded p-5">
    123
  </div>
  <div class="bg-blue-100 dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
    <div>
      <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
        <svg aria-hidden="true"
             class="h-6 w-6 text-white"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"><!-- ... --></svg>
      </span>
    </div>
    <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
    <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
      The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
    </p>
  </div>
</template>

